<template>
  <view class="count">
    <view
      class="count-item"
      v-for="(item, index) in dataList"
      :key="index"
      @click="handleSign(item)"
    >
      <view class="count-row">
        <view class="count-row-left">
          <view class="ss-flex ss-flex-1">
            <view class="operator">{{ item.createUserNickName }}</view>
            <view class="post-tag">{{ enumUserType(item.createUserType) }}</view>
          </view>
          <view class="status">
            {{
              item.clockInUserType == 1
                ? item.type == 1
                  ? "任务签到"
                  : "任务签到结束"
                : item.type == 2
                ? "工单签到"
                : "工单签到结束"
            }}
          </view>
        </view>
        <uv-avatar
          :src="webSrc(item.createUserAvatar)"
          size="106rpx"
          :customStyle="{ padding: '20rpx' }"
        />
      </view>
      <view class="count-bottom">
        <uv-text
          :prefix-icon="iconMap"
          :text="item.address || '--'"
          color="#757575"
          size="24rpx"
          lines="1"
          :icon-style="{
            marginRight: '24rpx',
          }"
        />
        <uv-text
          :prefix-icon="iconCompany"
          :text="item.customerName || '--'"
          color="#757575"
          size="24rpx"
          margin="10rpx 0"
          lines="1"
          :icon-style="{
            marginRight: '24rpx',
          }"
        />
        <uv-text
          :text="item.createTime"
          color="#757575"
          size="24rpx"
          align="right"
          lines="1"
        />
      </view>
    </view>
    <uv-load-more v-if="dataList.length > 0" :status="status" line />
    <uv-empty v-else margin-top="20vh" :icon="empty" text="没有打卡记录" />
  </view>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { webSrc, enumUserType } from "@/common/mothed.js";
import { getClockInList } from "@/request/home";
import iconMap from "@/static/sign/icon_map.png";
import iconCompany from "@/static/sign/icon_company.png";
import empty from "@/static/empty.png";

const dataList = ref([]); // 打卡记录列表
const total = ref(0); // 总条数
const queryParams = ref({
  workOrderId: "", // 任务ID
  pageNum: 1, // 当前页码
  pageSize: 5, // 每页条数
});
const status = ref("loadmore"); // 加载状态

const props = defineProps({
  // 任务id
  workOrderId: {
    type: [String, Number],
    default: "",
  },
  // 上拉加载
  onMore: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:onMore"]);

watch(
  props,
  (v) => {
    if (v.workOrderId) {
      if (!queryParams.value.workOrderId) {
        setTimeout(() => {
          queryParams.value.workOrderId = v.workOrderId;
          getList();
        }, 0);
      }
    }
    if (v.onMore) {
      if (total.value > dataList.value.length) {
        queryParams.value.pageNum += 1;
        getList();
      }
    }
  },
  { immediate: true, deep: true }
);

onMounted(() => {
  uni.setNavigationBarTitle({ title: "签到列表" });
});

// 获取列表数据
const getList = () => {
  status.value = "loading";
  getClockInList(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
      if (props.onMore) emit("update:onMore", false);
    });
};

// 查看签到详情
const handleSign = (item) => {
  uni.navigateTo({
    url: `/pages/sign/signDetail?id=${item.id}`,
  });
};
</script>
<style lang="scss" itemd>
.count {
  background-color: #fff;
  padding: 40rpx 40rpx 140rpx 40rpx;
  box-sizing: border-box;
  .count-item {
    background: #fff;
    border-radius: 20rpx;
    border: 2rpx solid #dedede;
    box-sizing: border-box;
    box-shadow: 0 0 20rpx 2rpx rgba(33, 33, 33, 0.16);
    margin-bottom: 20rpx;
    &:active {
      background-color: #f5f5f5;
    }
    .count-row {
      display: flex;
      justify-content: space-between;
      &-left {
        max-width: 480rpx;
        flex: 1;
        padding: 20rpx;
        .operator {
          font-size: 36rpx;
          color: #212121;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .post-tag {
          min-width: 220rpx;
          font-size: 24rpx;
          color: #757575;
          margin-left: 30rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .status {
          color: #757575;
          font-size: 24rpx;
          margin-top: 20rpx;
          display: inline-block;
          padding: 6rpx 20rpx;
          background: #efefef;
          border-radius: 8rpx;
        }
      }
    }
    .count-bottom {
      padding: 20rpx 30rpx;
    }
  }
}
</style>
